<!-- 行政区域 -->
<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 100%" row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" lazy>
      <el-table-column prop="name" label="区域名称">
      </el-table-column>
      <el-table-column prop="type" label="区域类型">
      </el-table-column>
      <el-table-column prop="code" label="区域编码">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/scgl/region";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      listLoading: true,
      tableData: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        console.log(response);
        // 省
        this.tableData = response.data.list.map((item) => ({
          ...item,
          type: item.type == 1 ? "省" : '',
          // 市
          children: item.children.map((child) => ({
            ...child,
            type: child.type === 2 ? "市" : "",
            // 区
            children: child.children.map((son) => ({
              ...son,
              type: son.type === 3 ? "区" : "",
            }))
          }))
        }));
        this.listLoading = false;
      });
    },
  },
};
</script>
